<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>我要验车</title>

<script src="<%=request.getContextPath()%>/bootstrap/plugins/calendaryanche/js/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap/plugins/calendaryanche/js/jquery.calendar.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap/plugins/calendaryanche/js/events_random.js"></script>
<link href="<%=request.getContextPath()%>/bootstrap/plugins/calendaryanche/css/jquery.calendar.css" rel="stylesheet" type="text/css" />

<style type="text/css">
html,body{
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.6em;
color:white;
background-color:#293a46;
}
#calendar{
position: absolute;
top: 3em;
left: 0.5em;
right: 0.5em;
bottom: 15em;
}

#date_head{
margin: auto;
text-align: center;

}

#controls{
position: absolute;
top: 0.2em;
height: 1em;
left: 50px;
right: 50px;
margin: 0;
padding: 0;
}

#controls ol{
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid #B3B3B3;
border-radius: 2px;
overflow: hidden;
-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
height: 21px;
}

#controls ol li{
display: inline-block;
float: left;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background: #CACACA url() repeat-x 0 0; /* Old browsers */
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
color: #333;
}

#controls ol li:hover{
background-color: #C0C0C0;
color: #000;
}

#controls ol li.on{
background: #C4C4C4;
color: #555;
}

#controls ol li button{
margin: 0;
background: transparent;
border: 0;
border-left: 1px solid #B3B3B3;
height: 100%;
padding: 0 10px;
color: inherit;
text-shadow: inherit;
cursor: pointer;
}

#controls ol li:first-child button{
border-left: 0;
}

#cals{
position:absolute;
left: 0;
}

#nav{
position:absolute;
top:0;
right: 0;
}


/*-----------*/
html,body{
height: 100%;
    padding: 0;
    margin: 0;
}

header{
	height:2em;
	line-height:2em;
	font-size:1.5em;
	text-align:center;
	color:#fff;
	width:100%;
}
#calendar{
	top:6em;
	bottom:12em;
}
#controls{
	top:3.2em;
}
footer{
	bottom:0;
	height:1.8em;
	line-height:1.8em;
	font-size:1em;
	text-align:center;
	color:#fff;
	width:100%;
	position:absolute;
	background:#3385ff;	
}
#calendar p{
	font-size:0.8em;
}
#calendar .tip{
    width: 38%;
    position: absolute;
    top: 5px;
    font-size: 15px!important;
    left: 36px;
}
.ui-cal-month .ui-cal-date p{
	width:40%!important;
}
#controls ol{
	height:92px;
}
#controls ol li{
	padding:0 12px;
	font-size:20px;
}
#controls ol li:first-child button{
	font-size:35px;
}
.datePanel{
	
}
</style>


<script type="text/javascript">
$(function(){
	$calendar = $('#calendar').cal({
		monthstodisplay	: 1,
		maskmonthlabel : 'D'
	});
 	
	 var datelist = ${checkCar.dataList};
	 for(var g=0;g<datelist.length;g++){
		 var temp = datelist[g].split("|");
		 var tempDay = '';
		 if(temp[0]==='a'){
			 tempDay='上午';
		 } else if(temp[0]==='b'){
			 tempDay='下午';
		 } else {
			 tempDay='全天';
		 }
		 $('#calendar .ui-cal-wrapper').find("[date='"+temp[1]+"']").addClass("ui-cal-click").append("<div class='tip'>"+tempDay+"</div>")
	 }

	$(document).on("click", ".ui-cal-click", function(){
		$('#calendar div').removeClass("selected");
		$(this).addClass("selected");
		var tipDate =$(this).attr("date");
		$(document).data("tipDate",tipDate);
	});

	/**
	 * Set the initial header value.
	 */
	$('#date_head').text($.cal.date().format('Y-m'));
	
	/**
	 * Button click handler. 
	 *
	 * TODO: Turn this into a drop-in module for calendars once we've got the capability to 
	 * 		 toggle calendar views without reloading. Include 'formatRange' method.
	 */
	$('#controls').on('click','button[name]',function(){
		
		var $this = $(this), action = $this.attr('name');
		
		// If this is already the current state, just exit.
		if( $this.is('.on') ) return;
		
		// Switch to the new state.
		
			
			/** 
			 * TODO: For now... ideally you'd be able to toggle between views without reloading.
			 */
			
				
		var today	 = $.cal.date(),
			starting = $calendar.cal('option','startdate'),
			duration = $calendar.cal('option','monthstodisplay'),
			newstart = starting,
			newend;
		
		switch( action ){	
			case 'next' : newstart = starting.addMonths(duration); $('button[name="today"]').parent().removeClass('on'); break;
			case 'prev'	: newstart = starting.addMonths(0-duration); $('button[name="today"]').parent().removeClass('on'); break;
			case 'today': newstart = $.cal.date().addDays(1-$.cal.date().format('d')); break;
		}
		
		// Work out the new end date.
		newend = newstart.addDays(duration-1);
		 
		// Set the new startdate.
		$calendar.cal( 'option','startdate', newstart );
		
		if( today >= newstart && today <= newend ) $('button[name="today"]').parent().addClass('on');
		
		// Set the new date in the header.
		$('#date_head').text( newstart.format('Y-m') );
		
	});
});

$(document).on("click", "#checkCarConfirm", function(){
	 var checkCarDate = $(document).data("tipDate");
	 if('undefined' === typeof(checkCarDate)){
		alert("请选择验车时间");
		return;
	 }
	 
	 var amorpm = $('#calendar .ui-cal-wrapper').find("[date='"+checkCarDate+"']").find(".tip").html();
	 if(amorpm == "全天"){
		 var html = "";
		 html+='<div class="page"><div class="page__hd">';
		 html+="<h1 class='page__title'>Button</h1> <p class='page__desc'>按钮</p></div>";
		 html+="<div class='page__bd page__bd_spacing'>";
		 html+="<div class='button-sp-area'>";
		 html+="<a href='javascript:;' class='weui-btn weui-btn_mini weui-btn_primary'>上午</a>";
		 html+="<a href='javascript:;' class='weui-btn weui-btn_mini weui-btn_warn'>下午</a>";
		 html+="</div></div>";
		//弹出层
		// return ;
	 } else {
		 var html = "";
		 html+='<div class="page"><div class="page__hd">';
		 html+="<h1 class='page__title'>Button</h1> <p class='page__desc'>按钮</p></div>";
		 html+="<div class='page__bd page__bd_spacing'>";
		 html+="<div class='button-sp-area'>";
		 html+="<a href='javascript:;' class='weui-btn weui-btn_mini weui-btn_primary'>"+amorpm+"</a>";
		 html+="</div></div>";
		 //弹出层
		// return ;
	 }
	 
	 var obj = {"shopId":$("#shopId").val(),
			 	"vehicleId":$("#vehicleId").val(),
			   "checkCarDate":checkCarDate};
	 var saveData = JSON.stringify(obj);
     window.location.href="checkCar?saveData="+saveData;
})
</script>

</head> 
	<form method="post" id="fm">
 	    <input type="hidden" name="shopId" id="shopId" value="${checkCar.shopId}"/>
 	    <input type="hidden" name="vehicleId" id="vehicleId" value="${checkCar.vehicleId}"/>
		<header>请选择验车时间</header>
		
		<div id="controls">
			<ol id="cals">
				<li><button name="prev"><</button></li>
			</ol>
			<h1 id="date_head"></h1>
			<ol id="nav">
				
				
				<li><button name="next">></button></li>
			</ol>
		</div>
		<div id="calendar"></div>						
		
		<footer id="checkCarConfirm">微信支付</footer>	
	</form>
</html>

